import 'package:flutter/material.dart';
import 'package:flutter_vant/component/popup.dart';
import 'package:flutter_vant/main.dart';
import 'package:simulator/components/DemoView/index.dart';

class PopupView extends HookWidget {
  const PopupView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    openPopup(Map item) {
      VanPopup.show(
          context: context,
          option: VanPopupOption(
              position: item['position'],
              closeable: item['closeable'],
              closeIcon: item['closeIcon'],
              closeIconPosition: item['closeIconPosition'],
              round: item['round'],
              child: item['text']));
    }

    renderList(List<Map> data) {
      return data.map((e) {
        return DemoView(
          title: e['title'],
          isGrid: false,
          children: [
            VanCellGroup(
              children: (e['children'] as List).map((el) {
                return VanCell(
                    title: el['name'],
                    isLink: true,
                    onClick: () => openPopup(el));
              }).toList(),
            )
          ],
        );
      }).toList();
    }

    renderMain() {
      final List<Map> data = [
        {
          "title": "基本用法",
          "children": [
            {"name": "展示弹出层", 'text': TextView('内容')}
          ]
        },
        {
          "title": "弹出位置",
          "children": [
            {"name": "顶部弹出", "position": 'top'},
            {"name": "底部弹出", "position": 'bottom'},
            {"name": "左侧弹出", "position": 'left'},
            {"name": "右侧弹出", "position": 'right'}
          ]
        },
        {
          "title": "关闭图标",
          "children": [
            {"name": "关闭图标", "closeable": true, 'position': 'bottom'},
            {
              "name": "自定义图标",
              "position": 'bottom',
              "closeable": true,
              "closeIcon": Icons.abc_outlined,
            },
            {
              "name": "图标位置",
              "position": 'bottom',
              'closeIconPosition': "top-left",
              "closeable": true,
            },
          ]
        },
        {
          "title": "圆角窗口",
          "children": [
            {"name": "圆角窗口", "round": true, 'position': 'bottom'},
          ]
        }
      ];
      return renderList(data);
    }

    return HookView(
      title: 'Popup',
      children: renderMain(),
    );
  }
}
